<template>
  <view class="feedback-box">
    <view class="header-box">
      <view class="header" :style="{ paddingTop: useAppData.titleHeight + 3 + 'px' }">
        <view class="back-box" style="left: 0" @tap="gotoBack">
          <image class="back-img" src="../../static/icon-back.png"></image>
        </view>
        <span>功能反馈</span>
      </view>
      <view class="feed-icon">
        <image class="icon-robot" src="../../static/icon-robot.png"></image>
        <view class="feed-con">请留下您的反馈意见我会及时处理～</view>
      </view>
    </view>
    <view class="forms-box">
      <uni-forms
        ref="baseFormRef"
        :modelValue="state.baseFormData"
        :rules="state.customRules"
        label-width="120"
      >
        <uni-forms-item label="问题类型" name="problemType" required>
          <uni-data-checkbox
            selectedColor="#E2F9E9"
            selectedTextColor="#08CB8F"
            v-model="state.baseFormData.problemType"
            mode="tag"
            :localdata="state.questionType"
          />
        </uni-forms-item>
        <uni-forms-item label="问题描述" name="description" required>
          <uni-easyinput
            type="textarea"
            trim="none"
            maxlength="-1"
            v-model="state.baseFormData.description"
            placeholder=""
            @input="handleInput"
            @confirm="handleInput"
            @change="handleInput"
          />
          <view class="num-box">{{ state.currentNum }}/{{ state.allNum }}</view>
        </uni-forms-item>
        <uni-forms-item label="联系方式" name="mobile" required>
          <uni-easyinput
            type="number"
            v-model="state.baseFormData.mobile"
            placeholder=""
          />
        </uni-forms-item>
      </uni-forms>
      <button class="confirm-btn" @tap="submit">提交</button>
    </view>
  </view>
</template>

<script setup>
import {
  onLaunch,
  onShow,
  onHide,
  onUnload,
  onShareAppMessage,
  onShareTimeline,
} from "@dcloudio/uni-app";
import { ref, reactive, onMounted } from "vue";
import * as API from "../../api/api";
import { getTime } from "../../utils/util";
import { storeToRefs } from "pinia";
import { useRunInfoStore } from "../../store/runInfo";
import { useAppStore } from "../../store/app";
import { useShareStore } from "../../store/share";
const useShareData = useShareStore();
const useAppData = useAppStore();
const useRunInfoData = useRunInfoStore();
const state = reactive({
  questionType: [
    {
      text: "功能及使用问题",
      value: 1,
    },
    {
      text: "其他",
      value: 2,
    },
  ],
  baseFormData: {
    problemType: 1,
    description: null,
    mobile: null,
  },
  customRules: {
    problemType: {
      rules: [
        {
          required: true,
          errorMessage: "问题类型不能为空",
        },
      ],
    },
    description: {
      rules: [
        {
          required: true,
          errorMessage: "问题描述不能为空",
        },
      ],
    },
    mobile: {
      rules: [
        {
          required: true,
          errorMessage: "联系电话不能为空",
        },
        {
          validateFunction: function (rule, value, data, callback) {
            let iphoneReg = /^1[3-9]\d{9}$/;
            if (!iphoneReg.test(value)) {
              callback("请输入正确的手机号");
            }
            return true;
          },
        },
      ],
    },
  },
  userInfo: null,
  currentNum: 0,
  allNum: 300,
});

const baseFormRef = ref(null);

const submit = () => {
  let params = {
    userId: state.userInfo?.customers?.customerId,
    ...state.baseFormData,
  };

  baseFormRef.value
    .validate()
    .then((res) => {
      API.createFeedback(params)
        .then((res) => {
          if (res.code === 0) {
            uni.showToast({
              title: "提交成功",
              icon: "none",
            });
            setTimeout(() => {
              gotoBack();
            }, 1000);
          }
        })
        .catch((err) => {
          console.log("保存失败");
        });
    })
    .catch((err) => {
      console.log("err", err);
    });
};

const handleInput = (value) => {
  setTimeout(() => {
    state.currentNum = state.baseFormData.description.length;
    console.log("state.baseFormData.description===11111", state.currentNum, state.baseFormData.description, state.baseFormData.description.length)
    if (Number(state.currentNum) >= 300) {
      state.currentNum = 300
      state.baseFormData.description = state.baseFormData.description.substring(0, 300)
    }
  }, 10);
};

const gotoBack = () => {
  uni.navigateBack();
};

onShareAppMessage((res) => {
  return useShareData.shareInfo;
});

onShareTimeline((res) => {
  return useShareData.shareInfo;
});

onShow(() => {
  state.userInfo = uni.getStorageSync("userInfo")
    ? JSON.parse(uni.getStorageSync("userInfo"))
    : null;
  state.baseFormData.mobile = state.userInfo?.customers?.emergencyContactMoblie ? state.userInfo?.customers?.emergencyContactMoblie : state.userInfo?.mobile
});
</script>

<style lang="scss" scoped>
.feedback-box {
  box-sizing: border-box;
  padding-bottom: 280rpx;
  .feed-con {
    width: 440rpx;
    height: 108rpx;
    background: url("https://model-capability.oss-cn-beijing.aliyuncs.com/pro/healthRun/tip-feek.png")
      0 0 no-repeat;
    background-size: 100% 100%;
    font-size: 28rpx;
    color: #ffffff;
    padding: 14rpx 26rpx 14rpx 45rpx;
    box-sizing: border-box;
    margin-left: 24rpx;
    text-align: left;
  }
}
.feed-icon {
  display: flex;
  align-items: center;
  padding-top: 20rpx;
  margin-left: 34rpx;
  .icon-robot {
    width: 172rpx;
    height: 144rpx;
  }
}
.forms-box {
  width: 100vw;
  padding: 28rpx 34rpx;
  box-sizing: border-box;
  overflow: auto;
  background: #ffffff;
  border-radius: 32rpx 32rpx 0rpx 0rpx;
  position: absolute;
  top: 350rpx;
  z-index: 100;
  .num-box {
    padding: 6rpx 8rpx;
    background: #fff;
    position: absolute;
    right: 10rpx;
    bottom: 10rpx;
    font-size: 24rpx;
    color: #919191;
  }
  :deep(.uni-forms-item) {
    display: block;
    margin-bottom: 20rpx;
  }
  :deep(.uni-forms-item__label) {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 32rpx;
    color: #222222;
  }
  :deep(.checklist-box.is--tag) {
    padding: 12rpx 24rpx !important;
    background: #fff !important;
    border: 2rpx solid #a7a5a5;
  }
  :deep(.checklist-box.is-checked) {
    background: #e2f9e9 !important;
    color: #08cb8f !important;
    border: none;
  }
  :deep(.uni-easyinput__content-textarea) {
    height: calc(100vh - 1000rpx);
    box-sizing: border-box;
    padding-bottom: 40rpx;
  }
}
.confirm-btn {
  width: calc(100vw - 68rpx);
  height: 88rpx;
  background: #08cb8f;
  border-radius: 44rpx;
  color: #fff;
  position: fixed;
  bottom: 54rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
}
.header-box {
  width: 100vw;
  height: 406rpx;
  text-align: center;
  background: url("")
    0 0 no-repeat;
  background-size: 100% 100%;
  .title {
    font-size: 34rpx;
    color: #000000;
  }
}
</style>
